<template>
  <div>
    <BasicModal
      @register="sendRegisterModal"
      v-bind="$attrs"
      title="新通知"
      :helpMessage="['查看帮助']"
    >
      <!--步骤进度-->
      <Steps :current="current">
        <Step :title="item.title" v-for="(item, index) in stepList" :key="index" />
      </Steps>
      <!--步骤需填写表单-->
      <BasicForm @register="registerForm">
        <template #recipientSlot>
          <div style="display: flex">
            <Select
              show-search
              mode="multiple"
              :options="selectOptions"
              :show-arrow="false"
              v-model:value="selectRecipient"
              @focus="getSelectList(params)"
              @change="getSelectUser"
              :filter-option="filterOption"
            />
          </div>
        </template>
        <template #iconWebSlot>
          <div>
            <div>
              <Switch v-model:checked="isSelectIcon" checked-children="√" />
              <span style="margin-left: 10px">图标</span>
            </div>
            <div style="margin-top: 10px" v-show="isSelectIcon">
              <IconPicker v-model:value="selectedIcon" />
              <ColorPicker v-model="selectedColor" />
            </div>
          </div>
        </template>
        <template #pushMethodSlot>
          <PushMethod
            :delivery-methods="deliveryMethodsList"
            :select-methods="selectedMethods"
            @step-list="getStepList"
          />
        </template>
        <template #tinymceEmailSlot>
          <Tinymce v-model="TinymceValue" @change="handleTinymceChange" width="100%" />
        </template>
        <template #MICROSOFT_TEAMSColorSlot>
          <ColorPicker v-model="TeamSelectedColor" />
        </template>
        <template #inspectSlot>
          <div v-for="(item, index) in dataList" :key="index" :style="inspectStyle">
            <div>
              <Icon icon="ant-design:bell-filled" /> <span>{{ item.method }}通知预览</span>
            </div>
            <div :style="containStyle">
              <div v-if="item.additionalConfig !== undefined">
                <Icon
                  :icon="item.additionalConfig.icon.icon"
                  :color="item.additionalConfig.icon.color"
                  v-if="item.additionalConfig.icon.enabled"
                />
                <span style="margin-left: 10px">{{ item.subject }}</span>
              </div>
              <div style="margin-bottom: 5px">{{ item.body }}</div>
              <div v-if="item.additionalConfig !== undefined">
                <span :style="textStyle" v-if="item.additionalConfig.actionButtonConfig.enabled">{{
                  item.additionalConfig.actionButtonConfig.text
                }}</span>
              </div>
            </div>
          </div>
          <div :style="inspectStyle">
            <div style="margin-bottom: 10px">
              <Icon icon="ant-design:bell-filled" />
              <span>{{ createNoticeUser.length }}个收件人</span>
            </div>
            <span v-for="(item, index) in createNoticeUser" :key="index" :style="userStyle">
              {{ item }}
            </span>
          </div>
        </template>
      </BasicForm>
      <!--底部按钮-->
      <template #footer>
        <Button
          class="mr-2"
          type="primary"
          size="middle"
          @click="stepLastClick"
          v-show="current > 0"
          >后退</Button
        >
        <Button class="mr-2" type="primary" size="middle" @click="stepNextClick">{{
          okText
        }}</Button>
      </template>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { Steps, Step, Button, Select, Switch } from 'ant-design-vue';
  import { stepModal } from '../data/notification.data';
  import PushMethod from '../PushMethod.vue';
  import { onMounted } from 'vue';
  import { ref } from 'vue';
  import { IconPicker } from '/@/components/Icon/index';
  import Icon from '/@/components/Icon/index';
  import { Tinymce } from '/@/components/Tinymce';
  import {
    getTargetsList,
    getDeliveryMethods,
    createNotice,
    requestNotice,
    getDashboardsList,
    getDashboardsStatus,
    getOneRecipient,
    getDashboardInfo,
  } from '/@/api/thingsborad/notification/notification';
  import { notificationsParams } from '/@/api/thingsborad/notification/model/notificationsModel';
  import ColorPicker from '/@/components/ColorPicker/main.vue';
  import { watch } from 'vue';
  import { v4 as uuidv4 } from 'uuid';
  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();
  const emits = defineEmits(['closeFlag']);
  let selectedColor = ref<string>('#ff0000');
  let TeamSelectedColor = ref<string>('#ff0000');
  //组合 收件人选择
  let selectRecipient = ref<Array<any>>([]);
  // 编辑 已选择的推送方法
  let selectedMethods = ref<Array<any>>([]);
  let deliveryMethodsList = ref<Array<any>>();
  let isSelectIcon = ref<boolean>(false);
  let selectedIcon = ref<any>();
  let TinymceValue = ref<any>();
  let okText = ref<string>('下一步');
  let selectTargets = ref<Array<any>>();
  let inspectStyle = ref<any>({
    borderRadius: '5px',
    border: '1px #9999 solid',
    backgroundColor: '#F3F6FA',
    padding: '20px',
    margin: '10px',
  });
  let containStyle = ref<any>({
    borderRadius: '5px',
    border: '1px #305680 solid',
    backgroundColor: '#FFFFFF',
    padding: '10px',
    margin: '5px',
  });
  let textStyle = ref<any>({
    borderRadius: '5px',
    border: '1px #305680 solid',
    color: '#305680',
    padding: '3px',
  });

  let userStyle = ref<any>({
    borderRadius: '5px',
    backgroundColor: '#E0E0E0',
    margin: '10px',
    padding: '5px',
  });
  const current = ref(0);

  //表单类型
  let schemas: FormSchema[] = [
    // 组合
    {
      ifShow: () => {
        return current.value === 0;
      },
      field: 'isUseModal',
      component: 'RadioButtonGroup',
      label: '',
      colProps: {
        span: 24,
      },
      defaultValue: 'isStart',
      componentProps: {
        style: {
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: '-100px',
        },
        options: [
          {
            label: '从头开始',
            value: 'isStart',
          },
          {
            label: '使用模板',
            value: 'useModal',
          },
        ],
      },
    },
    {
      ifShow: () => {
        return current.value === 0;
      },
      field: 'recipient',
      component: 'Select',
      slot: 'recipientSlot',
      label: '收件人',
      colProps: {
        span: 24,
      },
    },
    {
      ifShow: () => {
        return current.value === 0;
      },
      field: 'pushMethod',
      component: 'Switch',
      slot: 'pushMethodSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
    // web
    {
      show: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'themeWeb',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入主题',
      },
    },
    {
      show: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'informationWeb',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'iconWeb',
      component: 'Input',
      slot: 'iconWebSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'operateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      show: (value) => {
        return value.model.operateSwitch && true && stepList.value[current.value].title === 'WEB';
      },
      field: 'buttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      show: (value) => {
        return value.model.operateSwitch && stepList.value[current.value].title === 'WEB' && true;
      },
      field: 'operationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      show: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'WEB' &&
          value.model.operationTypeWeb === 'OpenURLLink'
        );
      },
      field: 'linkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },
    {
      show: (value) => {
        return (
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'instrumentPanelWeb',
      component: 'Select',
      label: '仪表板',
      colProps: {
        span: 24,
      },
    },
    {
      show: (value) => {
        return (
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'dashboardStatus',
      component: 'Select',
      label: '目标仪表板状态',
      colProps: {
        span: 24,
      },
      componentProps: {
        onFocus: async () => {
          let validateValue = await validate();

          if (validateValue.instrumentPanelWeb !== undefined) {
            getDashboardStatus(validateValue.instrumentPanelWeb);
          }
        },
      },
    },
    {
      show: (value) => {
        return (
          value.model.operateSwitch &&
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'SetDashboardStatus',
      component: 'Switch',
      label: '',
      suffix: '将通知中的实体设置为仪表盘状态',
      colProps: {
        span: 9,
      },
    },
    //email
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'EMAIL';
      },
      field: 'themeEmail',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入主题',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'EMAIL';
      },
      field: 'tinymceEmail',
      component: 'Input',
      label: '信息',
      slot: 'tinymceEmailSlot',
      colProps: {
        span: 24,
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'SMS';
      },
      field: 'SMSInput',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'SLACK';
      },
      field: 'SLACKInput',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSInput',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSMessage',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSColor',
      component: 'Input',
      label: 'Theme color',
      slot: 'MICROSOFT_TEAMSColorSlot',
      colProps: {
        span: 24,
      },
    },
    {
      show: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'operateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'buttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          true
        );
      },
      field: 'operationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'linkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },
    {
      ifShow: () => {
        return stepList.value.length - 1 === current.value;
      },
      field: 'inspect',
      component: 'Input',
      label: '',
      slot: 'inspectSlot',
      colProps: {
        span: 24,
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSoperateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSbuttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          true
        );
      },
      field: 'MICROSOFT_TEAMSoperationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenURLLink'
        );
      },
      field: 'MICROSOFT_TEAMSlinkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSinstrumentPanelWeb',
      component: 'Select',
      label: '仪表板',
      colProps: {
        span: 24,
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSdashboardStatus',
      component: 'Select',
      label: '目标仪表板状态',
      colProps: {
        span: 24,
      },
      componentProps: {
        onFocus: async () => {
          let validateValue = await validate();

          if (validateValue.MICROSOFT_TEAMSinstrumentPanelWeb !== undefined) {
            getDashboardStatus(validateValue.MICROSOFT_TEAMSinstrumentPanelWeb);
          }
        },
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSSetDashboardStatus',
      component: 'Switch',
      label: '',
      suffix: '将通知中的实体设置为仪表盘状态',
      colProps: {
        span: 9,
      },
    },
  ];
  let richText = ref<any>();
  let paramsData = ref<any>();
  let dataList = ref<Array<any>>([]);
  let createNoticeUser = ref<Array<any>>([]);
  let dashboardsList = ref<Array<any>>([]);
  const [registerForm, { validate, updateSchema, setFieldsValue }] = useForm({
    layout: 'vertical',
    schemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  const [sendRegisterModal, { closeModal, setModalProps: sendSetModalProps }] = useModalInner(
    async (data) => {
      sendSetModalProps({
        width: 800,
        height: 350,
      });
      current.value = 0;
      if (data !== true) {
        selectedMethods.value = data.info.deliveryMethods;
        selectTargets.value = data.info.targets;
        try {
          selectRecipient.value = [];
          data.info.targets.forEach(async (item) => {
            let oneRecipientData = await getOneRecipient(item);
            oneRecipientData.forEach((rItem) => {
              selectRecipient.value.push(rItem.name);
            });
          });
          Object.keys(data.info.template.configuration.deliveryMethodsTemplates).forEach(
            async (key) => {
              if (key === 'SMS') {
                setFieldsValue({
                  SMSInput: data.info.template.configuration.deliveryMethodsTemplates[key].body,
                });
              }
              if (key === 'EMAIL') {
                richText.value =
                  data.info.template.configuration.deliveryMethodsTemplates[key].body;
                (TinymceValue.value =
                  data.info.template.configuration.deliveryMethodsTemplates[key].body),
                  setFieldsValue({
                    themeEmail:
                      data.info.template.configuration.deliveryMethodsTemplates[key].subject,
                  });
              }
              if (key === 'WEB') {
                if (
                  data.info.template.configuration.deliveryMethodsTemplates[key].additionalConfig
                    .icon.enabled
                ) {
                  isSelectIcon.value = true;
                  selectedIcon.value =
                    data.info.template.configuration.deliveryMethodsTemplates[
                      key
                    ].additionalConfig.icon.icon;
                  selectedColor.value =
                    data.info.template.configuration.deliveryMethodsTemplates[
                      key
                    ].additionalConfig.icon.color;
                }
                if (
                  data.info.template.configuration.deliveryMethodsTemplates[key].additionalConfig
                    .actionButtonConfig.enabled
                ) {
                  setFieldsValue({
                    operateSwitch: true,
                    buttonTextWeb:
                      data.info.template.configuration.deliveryMethodsTemplates[key]
                        .additionalConfig.actionButtonConfig.text,
                  });
                  if (
                    data.info.template.configuration.deliveryMethodsTemplates[key].additionalConfig
                      .actionButtonConfig.linkType === 'DASHBOARD'
                  ) {
                    try {
                      let dashboardInfo = await getDashboardInfo(
                        data.info.template.configuration.deliveryMethodsTemplates[key]
                          .additionalConfig.actionButtonConfig.dashboardId,
                      );
                      setFieldsValue({
                        operationTypeWeb: 'OpenDashboard',
                        instrumentPanelWeb: dashboardInfo.title,
                        dashboardStatus:
                          data.info.template.configuration.deliveryMethodsTemplates[key]
                            .additionalConfig.actionButtonConfig.dashboardState,
                      });
                    } catch (error) {}
                  } else {
                    setFieldsValue({
                      operationTypeWeb: 'OpenURLLink',
                      linkWeb:
                        data.info.template.configuration.deliveryMethodsTemplates[key]
                          .additionalConfig.actionButtonConfig.link,
                    });
                  }
                }
                setFieldsValue({
                  informationWeb:
                    data.info.template.configuration.deliveryMethodsTemplates[key].body,
                  themeWeb: data.info.template.configuration.deliveryMethodsTemplates[key].subject,
                });
              }
            },
          );
        } catch (error) {}
      } else {
        selectRecipient.value = [];
        selectedMethods.value = ['WEB'];
      }
      getMethods();
      updateSchema({
        field: 'MICROSOFT_TEAMSinstrumentPanelWeb',
        componentProps: {
          options: dashboardsList.value,
        },
      });
      updateSchema({
        field: 'instrumentPanelWeb',
        componentProps: {
          options: dashboardsList.value,
        },
      });
    },
  );

  //推送方式
  async function getMethods() {
    try {
      const deliveryMethodsData = await getDeliveryMethods();
      deliveryMethodsList.value = deliveryMethodsData;
    } catch (error) {}
  }
  //获取子组件传值
  let stepList = ref<stepModal[]>([]);
  const getStepList = (
    value: { title: string; description?: string | undefined; subTitle?: string | undefined }[],
  ) => {
    stepList.value = value;
    if (current.value === 0) {
      return;
    }
    current.value = 0;
  };
  onMounted(() => {
    sendSetModalProps({
      width: 800,
      height: 350,
    });
    getDashboardsData();
  });
  async function getDashboardsData() {
    if (hasPermission('SYS_ADMIN')) {
      dashboardsList.value = [];
      return;
    }
    try {
      let paramsValue: notificationsParams = {
        pageSize: 10,
        page: 0,
        sortProperty: 'title',
        sortOrder: 'ASC',
      };

      let dashboardsValue = await getDashboardsList(paramsValue);
      dashboardsValue.data.forEach((item: { name: any; id: { id: any } }) => {
        dashboardsList.value.push({
          label: item.name,
          value: item.id.id,
        });
      });
    } catch (error) {}
  }
  function handleTinymceChange(value: any) {
    richText.value = value;
  }

  //步骤进度下一步点击事件
  async function stepNextClick() {
    if (stepList.value.length - 2 === current.value) {
      const validateValue = await validate();

      paramsData.value = {
        targets: selectTargets.value,
        template: {
          name: uuidv4(),
          notificationType: 'GENERAL',
          configuration: {
            deliveryMethodsTemplates: {},
          },
        },
        additionalConfig: {
          sendingDelayInSec: 0,
        },
      };
      for (let i = 1; i < stepList.value.length - 1; i++) {
        if (stepList.value[i].title === 'WEB') {
          let web = {
            enabled: true,
            subject: validateValue.themeWeb,
            body: validateValue.informationWeb,
            additionalConfig: {},
            method: 'WEB',
          };

          if (isSelectIcon.value) {
            web.additionalConfig['icon'] = {
              enabled: true,
              icon: selectedIcon.value,
              color: selectedColor.value,
            };
          } else {
            web.additionalConfig['icon'] = {
              enabled: false,
            };
          }

          if (validateValue.operateSwitch) {
            if (validateValue.operationTypeWeb === 'OpenURLLink') {
              web.additionalConfig['actionButtonConfig'] = {
                enabled: true,
                text: validateValue.buttonTextWeb,
                linkType: 'LINK',
                link: validateValue.linkWeb,
              };
            } else {
              web.additionalConfig['actionButtonConfig'] = {
                enabled: true,
                text: validateValue.buttonTextWeb,
                linkType: 'DASHBOARD',
                dashboardId: validateValue.instrumentPanelWeb,
                dashboardState: validateValue.dashboardStatus,
                setEntityIdInState: true,
              };
            }
          } else {
            web.additionalConfig['actionButtonConfig'] = {
              enabled: false,
            };
          }
          paramsData.value.template.configuration.deliveryMethodsTemplates['WEB'] = web;

          dataList.value.push(web);
        }
        if (stepList.value[i].title === 'EMAIL') {
          let EMAIL = {
            enabled: true,
            subject: validateValue.themeEmail,
            body: richText.value,
            method: 'EMAIL',
          };
          paramsData.value.template.configuration.deliveryMethodsTemplates['EMAIL'] = EMAIL;

          dataList.value.push(EMAIL);
        }

        if (stepList.value[i].title === 'SMS') {
          let SMS = {
            enabled: true,
            body: validateValue.SMSInput,
            method: 'SMS',
          };
          paramsData.value.template.configuration.deliveryMethodsTemplates['SMS'] = SMS;

          dataList.value.push(SMS);
        }

        if (stepList.value[i].title === 'SLACK') {
          let SLACK = {
            enabled: true,
            body: validateValue.SLACKInput,
            method: 'SLACK',
          };
          paramsData.value.template.configuration.deliveryMethodsTemplates['SLACK'] = SLACK;

          dataList.value.push(SLACK);
        }

        if (stepList.value[i].title === 'MICROSOFT_TEAMS') {
          let MICROSOFT_TEAMS = {
            enabled: true,
            subject: validateValue.MICROSOFT_TEAMSInput,
            body: validateValue.MICROSOFT_TEAMSMessage,
            themeColor: TeamSelectedColor.value,
            button: {},
            method: 'MICROSOFT_TEAMS',
          };
          if (validateValue.MICROSOFT_TEAMSoperationTypeWeb === 'OpenURLLink') {
            MICROSOFT_TEAMS['button'] = {
              enabled: true,
              text: validateValue.MICROSOFT_TEAMSbuttonTextWeb,
              linkType: 'LINK',
              link: validateValue.MICROSOFT_TEAMSlinkWeb,
            };
          } else {
            MICROSOFT_TEAMS['button'] = {
              enabled: true,
              text: validateValue.MICROSOFT_TEAMSbuttonTextWeb,
              linkType: 'LINK',
              dashboardId: validateValue.MICROSOFT_TEAMSinstrumentPanelWeb,
              dashboardState: validateValue.MICROSOFT_TEAMSdashboardStatus,
              setEntityIdInState: true,
            };
          }

          paramsData.value.template.configuration.deliveryMethodsTemplates['MICROSOFT_TEAMS'] =
            MICROSOFT_TEAMS;

          dataList.value.push(MICROSOFT_TEAMS);
        }
      }
      let createNoticeData = await createNotice(paramsData.value);
      createNoticeUser.value = createNoticeData.recipientsPreview;
    }
    if (stepList.value.length - 1 === current.value) {
      await requestNotice(paramsData.value);
      emits('closeFlag', true);
      closeModal();
      dataList.value = [];
      current.value = 0;
      selectedMethods.value = ['WEB'];
    }

    if (current.value + 1 < stepList.value.length) {
      current.value += 1;
    }
  }
  //步骤进度后退点击事件
  function stepLastClick() {
    current.value -= 1;
    dataList.value.pop();
  }
  watch(
    () => current.value,
    (nVal) => {
      if (stepList.value.length - 1 === nVal) {
        okText.value = '发送';
      } else {
        okText.value = '下一步';
      }
    },
  );
  //请求参数
  let params = ref<notificationsParams>({
    pageSize: 50,
    page: 0,
    sortProperty: 'name',
    sortOrder: 'ASC',
    notificationType: 'GENERAL',
  });
  // 下拉列表选项变量
  let selectOptions = ref<any>([]);
  //输入检索选项
  const filterOption = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  //获取收件人下拉列表数据
  async function getSelectList(params: notificationsParams) {
    selectOptions.value = [];
    try {
      const recipientData = await getTargetsList(params);
      recipientData.data.forEach((item: { id: { id: any }; name: any }) => {
        let dome = {
          value: item.id.id,
          label: item.name,
        };
        selectOptions.value.push(dome);
      });
    } catch (error) {
      console.error('获取数据时出错：', error);
      // 处理错误情况
    }
  }
  async function getDashboardStatus(id: string) {
    try {
      let dashboardsArray = ref<Array<any>>([]);
      let dashboardsStatus = await getDashboardsStatus(id);
      Object.keys(dashboardsStatus.configuration.states).forEach((key: any) => {
        dashboardsArray.value.push({
          value: dashboardsStatus.configuration.states[key].name,
          label: key,
        });
      });
      updateSchema({
        field: 'MICROSOFT_TEAMSdashboardStatus',
        componentProps: {
          options: dashboardsArray.value,
        },
      });
      updateSchema({
        field: 'dashboardStatus',
        componentProps: {
          options: dashboardsArray.value,
        },
      });
    } catch (error) {}
  }

  function getSelectUser(value: any[] | undefined) {
    selectTargets.value = value;
  }
</script>
